<template>
<header>
  <nav id="nav">
    <ul>
      <li v-for="item of  menu" :key="item.id">
        <router-link :to="{name:item.url}">{{item.name}}</router-link>
      </li>
     
    </ul>

  </nav>
</header>
</template>

<script>
import menu from './menu'
export default {
  data(){
    return{
      menu
    }
  }
};
</script>

<style scoped>
.router-link-active{color: #fff; background: rgba(20, 20, 20, 0.8); box-shadow: 0px 1px 0px rgba(255,255,255,.1), inset 0px 1px 1px rgba(0,0,0,.7); border-radius: 6px; }
</style>